<template>
    <div>
        <el-card shadow="never" style="margin-bottom: 20px;">
            <el-badge :value="dsh" class="item">
                <el-button @click="submitData(1)">待审核</el-button>
            </el-badge>

                  <el-badge :value="shbh" class="item">
                    <el-button @click="submitData(2)">审核驳回</el-button>
                  </el-badge>
            <el-badge :value="shtg" class="item" type="primary">
                <el-button @click="submitData(3)">审核通过</el-button>
            </el-badge>
            <el-badge :value="(dsh+shbh+shtg)" class="item" type="primary">
                <el-button @click="submitData(0)">审核通过</el-button>
            </el-badge>
        </el-card>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item label="行业">
                    <el-select v-model="searchInfo.cWork" clear placeholder="请选择">
                        <el-option
                                v-for="item in cTypeList"
                                v-if="item.pid === 0"
                                :key="item.ID"
                                :label="item.name"
                                :value="item.ID"
                        />
                    </el-select>
<!--                    <el-input placeholder="搜索条件" v-model="searchInfo.cWork"></el-input>-->
                </el-form-item>
                <el-form-item label="品类名">
                    <el-select v-model="searchInfo.cProduct" clear placeholder="请选择">
                        <el-option
                                v-for="item in cTypeList"
                                v-if="item.pid != 0"
                                :key="item.ID"
                                :label="item.name"
                                :value="item.ID"
                        />
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="是否质保" prop="isQa">-->
<!--                    <el-select v-model="searchInfo.isQa" clear placeholder="请选择">-->
<!--                        <el-option-->
<!--                                key="true"-->
<!--                                label="是"-->
<!--                                value="true">-->
<!--                        </el-option>-->
<!--                        <el-option-->
<!--                                key="false"-->
<!--                                label="否"-->
<!--                                value="false">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
                <el-form-item label="状态">
                    <el-select v-model="searchInfo.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="用户编号">-->
<!--                    <el-input placeholder="搜索条件" v-model="searchInfo.userId"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-button @click="onSubmit" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="rt" type="primary">重置</el-button>
                </el-form-item>
<!--                <el-form-item>-->
<!--                    <el-button @click="openDialog" type="primary">新增userGoods表</el-button>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-popover placement="top" v-model="deleteVisible" width="160">
                        <p>确定要删除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>
                            <el-button @click="onDelete" size="mini" type="primary">确定</el-button>
                        </div>
<!--                        <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">批量删除</el-button>-->
                    </el-popover>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                border
                ref="multipleTable"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
        >
<!--            <el-table-column type="selection" width="55"></el-table-column>-->
           <el-table-column label="会员名称">
               <template slot-scope="scope">{{scope.row.users.name}}</template>
           </el-table-column>
            <el-table-column label="行业"  width="120">
                <template slot-scope="scope">{{scope.row.c_work_info.name}}</template>
            </el-table-column>
            <el-table-column label="品类名" width="120">
                <template slot-scope="scope">{{scope.row.c_product_info.name}}</template>
            </el-table-column>
            <el-table-column label="商品标题" prop="title" width="120"></el-table-column>
            <el-table-column label="日期" width="180">
                <template slot-scope="scope">{{scope.row.CreatedAt|formatDate}}</template>
            </el-table-column>
            <el-table-column label="状态"  width="120">
                <template slot-scope="scope">
                    <div v-for="item in statusOption" v-if="item.value == scope.row.status">
                        {{ item.label }}
                    </div>
<!--                    <el-select v-model="scope.row.status" placeholder="请选择">-->
<!--                        <el-option-->
<!--                                v-for="item in statusOption"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value"-->
<!--                        />-->
<!--                    </el-select>-->
                </template>
            </el-table-column>
                <el-table-column label="置顶状态"  width="120">
                    <template slot-scope="scope">
                    <span v-if="scope.row.top == true">置顶</span>
                    <span v-if="scope.row.top == false">未置顶</span>
                    </template>
<!--                    <template slot-scope="scope">-->
<!--                        <el-switch-->
<!--                                v-model="scope.row.top"-->
<!--                                active-text="置顶"-->
<!--                                inactive-text="取消置顶">-->
<!--                        </el-switch>-->
<!--                    </template>-->
            </el-table-column>

            <el-table-column label="按钮组">
                <template slot-scope="scope">
                    <el-button class="table-button" @click="updateUserGoods(scope.row)" size="small" type="primary" icon="el-icon-edit">变更</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>
                    <el-button   size="mini" @click="prevRow(scope.row)">预览</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
            <el-form :model="formData" label-position="right" label-width="80px">
<!--                <el-form-item label="品牌或厂家:">-->
<!--                    <el-input v-model="formData.brand" clearable placeholder="请输入" ></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="品类名:"><el-input v-model.number="formData.cProduct" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="行业:"><el-input v-model.number="formData.cWork" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="内容:">-->
<!--                    <el-input v-model="formData.content" clearable placeholder="请输入" ></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="是否质保:">-->
<!--                    <el-switch active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" v-model="formData.isQa" clearable ></el-switch>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="规格或型号:">-->
<!--                    <el-input v-model="formData.norms" clearable placeholder="请输入" ></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="副标题:">-->
<!--                    <el-input v-model="formData.sTitle" clearable placeholder="请输入" ></el-input>-->
<!--                </el-form-item>-->

                <el-form-item label="状态:">
                    <el-select v-model="formData.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
<!--                    <el-input v-model.number="formData.status" clearable placeholder="请输入"></el-input>-->
                </el-form-item>

<!--                <el-form-item label="仓库信息:">-->
<!--                    <el-input v-model="formData.stock" clearable placeholder="请输入" ></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="标题:">-->
<!--                    <el-input v-model="formData.title" clearable placeholder="请输入" ></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="用户编号:"><el-input v-model.number="formData.userId" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        createUserGoods,
        deleteUserGoods,
        deleteUserGoodsByIds,
        updateUserGoods,
        findUserGoods,
        getUserGoodsList
    } from "@/api/userGoods";  //  此处请自行替换地址
    import { formatTimeToStr } from "@/utils/date";
    import infoList from "@/mixins/infoList";
    import {getCTypesList} from "@/api/cTypes";
    export default {
        name: "UserGoods",
        mixins: [infoList],
        data() {
            return {
                cTypeList:[],
                statusOption:[
                    {
                        value: 1,
                        label: '待审核'
                    }, {
                        value: 2,
                        label: '审核驳回'
                    }, {
                        value: 3,
                        label: '审核通过'
                    }
                ],
                listApi: getUserGoodsList,
                dialogFormVisible: false,
                type: "",
                deleteVisible: false,
                multipleSelection: [],formData: {
                    brand:"",
                    cProduct:0,
                    cWork:0,
                    content:"",
                    isQa:false,
                    norms:"",
                    sTitle:"",
                    status:0,
                    stock:"",
                    title:"",
                    userId:0,
                }
            };
        },
        filters: {
            formatDate: function(time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            formatBoolean: function(bool) {
                if (bool != null) {
                    return bool ? "是" :"否";
                } else {
                    return "";
                }
            }
        },
        methods: {
            rt(){
                this.searchInfo = {}
                this.getTableData()
            },
            prevRow(row){
                window.open("https://yjc.xmzhuchen.com/#/company/"+row.userId+"/goods/"+row.ID, '_blank');

            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1
                this.pageSize = 10
                if (this.searchInfo.isQa==""){
                    this.searchInfo.isQa=null
                }
                this.getTableData()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            deleteRow(row){
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteUserGoods(row);
                });
            },
            async onDelete() {
                const ids = []
                if(this.multipleSelection.length == 0){
                    this.$message({
                        type: 'warning',
                        message: '请选择要删除的数据'
                    })
                    return
                }
                this.multipleSelection &&
                this.multipleSelection.map(item => {
                    ids.push(item.ID)
                })
                const res = await deleteUserGoodsByIds({ ids })
                if (res.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    if (this.tableData.length == ids.length && this.page > 1) {
                        this.page--;
                    }
                    this.deleteVisible = false
                    this.getTableData()
                }
            },
            async updateUserGoods(row) {
                const res = await findUserGoods({ ID: row.ID });
                this.type = "update";
                if (res.code == 0) {
                    this.formData = res.data.reuserGoods;
                    this.dialogFormVisible = true;
                }
            },
            closeDialog() {
                this.dialogFormVisible = false;
                this.formData = {
                    brand:"",
                    cProduct:0,
                    cWork:0,
                    content:"",
                    isQa:false,
                    norms:"",
                    sTitle:"",
                    status:0,
                    stock:"",
                    title:"",
                    userId:0,

                };
            },
            async deleteUserGoods(row) {
                const res = await deleteUserGoods({ ID: row.ID });
                if (res.code == 0) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    if (this.tableData.length == 1 && this.page > 1 ) {
                        this.page--;
                    }
                    this.getTableData();
                }
            },
            async enterDialog() {
                let res;
                switch (this.type) {
                    case "create":
                        res = await createUserGoods(this.formData);
                        break;
                    case "update":
                        res = await updateUserGoods(this.formData);
                        break;
                    default:
                        res = await createUserGoods(this.formData);
                        break;
                }
                if (res.code == 0) {
                    this.$message({
                        type:"success",
                        message:"创建/更改成功"
                    })
                    this.closeDialog();
                    this.getTableData();
                }
            },
            openDialog() {
                this.type = "create";
                this.dialogFormVisible = true;
            },
            async submitData(status){
                if(status === 0){
                    this.searchInfo.status = undefined
                }else{
                    this.searchInfo.status = status
                }
                await this.getTableData();

            }
        },
        async created() {
            var cTypesList = await getCTypesList({page:1,pageSize:10000})
            this.cTypeList = cTypesList.data.list
            await this.getTableData();

        }
    };
</script>

<style>
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
</style>


